<script setup lang="ts">
interface Props {
  // icon 名字
  name: string
  // 填充颜色
  color?: string
  // 大小
  size?: string
}

const props = withDefaults(defineProps<Props>(), {
  name: '',
  color: 'currentColor',
  size: '1em'
})

const symbolId = computed(() => `#icon-${props.name}`)
</script>

<template>
  <el-icon :size="props.size">
    <svg aria-hidden="true">
      <use :xlink:href="symbolId" />
    </svg>
  </el-icon>
</template>

<style scoped>
svg {
  display: inline-block;
  transition: transform 0.3s;
}
</style>
